﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="LimitPageButtonsNumber">
    <h2><DemoNavLink Link="Pager#LimitPageButtonsNumber" />Pager - Limit the Number of Page Buttons</h2>
    <p>
        In this demo module, the total number of pages (<a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.PageCount">PageCount</a>)
        is set to 100 and the number of visible numeric buttons (<a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.VisibleNumericButtonCount">VisibleNumericButtonCount</a>)
        is set to 7. Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager">Pager</a> component's navigation buttons to switch between pages.

    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Click page numbers or navigation buttons"/>
    </div>
    <div class="card-body overflow-auto">
        <DxPager PageCount="100"
                 VisibleNumericButtonCount="7"
                 ActivePageIndex="50"
                 NavigationMode="PagerNavigationMode.NumericButtons"
                 SizeMode="SizeMode">
        </DxPager>
    </div>
</div>

<CodeSnippet_Pager_Large/>
